<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置移动端rem尺寸</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script type="text/javascript">
        //js动态屏幕适配rem值，当不是移动端设备PC显示的宽度
        !function() {
            function remSize() {
                var psdWidth=750;//设计稿的宽度
                var pcWidth=600;//PC显示的宽度
                var ua = navigator.userAgent.toLocaleLowerCase();
                var isMobile = /iPhone|iPod|android|Windows Phone/ig.test(ua);
                var html = document.getElementsByTagName("html")[0];
                var pageWidth = html.getBoundingClientRect().width;
                if(isMobile){
                    html.style.fontSize = pageWidth / psdWidth  / 16 * 10000 + "%";
                }else{
                    html.style.fontSize = pcWidth / psdWidth  / 16 * 10000 + "%";
                }
            }
            window.addEventListener("resize", function(){remSize();}, !1);
            remSize();
        }(window);
    </script>
    <style type="text/css">
        *{margin:0;padding:0;list-style: none;border:none;}
        .wrap{margin:0 auto;width:7.5rem;}
        h1{font-size:0.3rem;}/*相当于psd使用的是30px的字体*/
        img{width:7.5rem;}/*相当于psd使用的是750px的宽度*/
        .icon1{width: 0.61rem;height:0.56rem;background:url(images/test.png) no-repeat 0 0;background-size:1.22rem;}
        .icon2{width: 0.61rem;height:0.56rem;background:url(images/test.png) no-repeat -0.61rem 0;background-size:1.22rem;}
        .icon3{width: 0.61rem;height:0.56rem;background:url(images/test.png) no-repeat 0 -0.56rem;background-size:1.22rem;}
        .icon4{width: 0.61rem;height:0.56rem;background:url(images/test.png) no-repeat -0.61rem -0.56rem;background-size:1.22rem;}
    </style>
</head>
<body>
<div class="wrap">
    <h1>设置移动端rem尺寸</h1>
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon3"></div>
    <div class="icon4"></div>
    <img src="images/s1bg.jpg" alt=""/>
</div>

</body>
</html>